<template>
	<view>
		<view class="top-back">
			<view class="top-name">参数配置</view>
			<view class="top-right top-right-left" @click="addAction">
				<view class="top-exit">新增</view>
			</view>

		</view>
		<view class="uni-container">
			<scroll-view class="left-back" scroll-y="true">
				<view class="left-item">
					<text>参数名称</text>
				</view>
				<view v-for="(item,index) in roleArr" :key="index">
					<view class="left-item" @click="clickShowAction(index)">
						<image :class="item.show?'left-item-image':'left-item-image left-item-image-trans' "
							src="../../../../static/arrow_down.png"></image>
						<view class="left-item-name">{{item.name}}</view>

					</view>
					<view v-if="item.show" v-for="(value1,ind) in item.children" :key="ind">
						<view
							:class="btnselect == index && rowselect == ind+1?'left-item left-item-select':'left-item'">
							<image class="left-item-image left-item-image1"></image>
							<view class="left-item-name" @click="clickLest1Action(index,ind,value1)">{{value1.name}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<scroll-view class="right-back" scroll-x="true">
				<uni-table ref="table" :loading="loading" border stripe emptyText=" ">
					<uni-tr>
						<uni-th align="center">参数值</uni-th>
						<uni-th align="center">是否默认值</uni-th>
						<uni-th align="center">状态</uni-th>
						<uni-th align="center">操作人</uni-th>
						<uni-th align="center">最后操作时间</uni-th>
						<uni-th align="center">操作</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td align="center"><text selectable="true">{{ item.value== -1 ? '不限' :item.value}}</text></uni-td>
						<uni-td align="center"><text selectable="true">{{ item.def.desc }}</text></uni-td>

						<uni-td align="center" @tap.stop.prevent>
							<switch color="#2DA9C5" :checked="item.status.code == '1'" @change.stop="switchChange(item)"
								style="transform:scale(0.7)" />
						</uni-td>
						<uni-td align="center"><text selectable="true">{{ item.editAt?item.editAt:item.createAt }}</text></uni-td>
						<uni-td align="center"><text selectable="true">{{ item.editTime?item.editTime:item.createTime }}</text></uni-td>
						<uni-td align="center" @tap.stop.prevent>
							<view class="item-blue-text" @click="clickEditAction(item)">编辑</view>
						</uni-td>
					</uni-tr>
				</uni-table>
				<view class="search-back" v-if="tableData.length == 0">
					<image class="search-image" :src="pc_search_nodata"></image>
					<view class="search-noresult">没有查询到结果</view>
				</view>
			</scroll-view>
		</view>
		<paramConfigAdd v-if="showAddClass" :classItem='classItem' :selectItem='selectItem' :editType='editType'
			v-on:successBack='updataRequest()' @clickAddClose='clickAddClose'></paramConfigAdd>
	</view>
</template>

<script>
	import paramConfigAdd from "@/packageB/PC/consultMange/paramConfig/parmaConfigAdd.vue"
	export default {
		components: {
			paramConfigAdd
		},
		data() {
			return {
				showAddClass: false,
				tableData: [],
				roleArr: [], //角色
				btnselect: 0,
				rowselect: 1,
				editType: 'add',
				classID: '',
				showAdd: false,
				selectItem: {},
				classItem: {},
				startRequest: true, //首次请求
				pc_search_nodata:getApp().globalData.baseImageUrl+'/pc_search_nodata.png'
			}

		},
		onLoad() {

		},
		mounted() {
			this.requestClassData()
		},
		methods: {
			//列表网络请求
			async requestListData(classifyId) {
				let _this = this
				let parmas = {
					'classifyId': classifyId,
					size: '1000'
				}

				console.log(parmas)
				const res = await this.$myRequest({
					url: "/admin/parameter/list",
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.tableData = res.data.data.list
				}
			},
			//分类网络请求
			async requestClassData() {
				let _this = this
				let parmas = {
					'pid': '',
					size: '1000'
				}
				console.log(parmas)
				const res = await this.$myRequest({
					url: "/admin/parameter/classify",
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.roleArr = res.data.data.list;
					for (var i = 0; i < _this.roleArr.length; i++) {
						_this.requestRoleChildData(res.data.data.list[i].id, i);
					}
					var item = _this.roleArr[0];
					item.show = true;
					_this.$set(_this.roleArr, 0, item)
				}
			},

			//二级分类网络请求
			async requestRoleChildData(pid, index) {
				let _this = this;
				let parmas = {
					'pid': pid,
					size: '1000'
				}
				console.log(parmas);
				const res = await this.$myRequest({
					url: "/comm/classify/list",
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {

					var item = _this.roleArr[index];
					item.children = res.data.data.list;
					_this.$set(_this.roleArr, index, item);

					if (_this.startRequest) {
						if (item.children.length) {
							var value = item.children[0];
							_this.classItem = value;
							_this.startRequest = false;

							_this.requestListData(value.id)
						}
					}
					console.log(_this.roleArr);
				}
			},
			async updataRequest() {
				this.requestListData(this.classItem.id)
			},

			//改变状态
			async switchChange(item) {
				console.log(item)
				var url = "/comm/dict/disable/"; //禁用
				if (item.status.code == '0') {
					url = "/comm/dict/enable/" //启用
				}

				let _this = this
				const res = await this.$myRequest({
					url: url + item.id,
					method: 'PUT',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {

				}
			},


			//展开、隐藏分类
			clickShowAction(index) {
				var item = this.roleArr[index];
				item.show = !item.show
				this.$set(this.roleArr, index, item)
			},

			//
			leftAction(e) {
				console.log(e)
				this.classID = e.currentTarget.id;
				this.x = e.touches[0].clientX;
				this.y = e.touches[0].clientY + 4;
				this.showAdd = true;
				this.showMessage = !this.showMessage;
			},
			left1Action(e) {
				console.log(e)
				this.classID = e.currentTarget.id;
				this.x = e.touches[0].clientX;
				this.y = e.touches[0].clientY + 4;
				this.showAdd = false;
				this.showMessage = !this.showMessage;
			},

			clickLestAction(index) {

				this.btnselect = index;
				this.rowselect = 0;
				// var item = this.roleArr[index];
				// item.show = !item.show
				// this.$set(this.roleArr, index, item)
			},
			clickLest1Action(index, ind, value) {
				this.btnselect = index;
				this.rowselect = ind + 1;
				this.classItem = value;
				this.requestListData(value.id)
			},

			//新增
			addAction() {
				console.log(this.classItem, this.classID)
				this.showAddClass = true;
				this.editType = 'add';
			},

			//编辑
			clickEditAction(item) {
				console.log(item);
				this.selectItem = item;
				this.editType = 'edit';
				this.showAddClass = true;
			},

			clickAddClose() {
				this.showAddClass = false;
			}
		}
	}
</script>

<style scoped>
	.top-back {
		display: flex;
		align-items: center;
		padding: 10px;
	}

	.top-name {
		color: #333;
		font-size: 18px;
		font-weight: bold;
		margin-left: 30px;
	}

	.top-num {
		color: #999;
		font-size: 18px;
		margin-left: 4px;
	}

	.top-contnet {
		font-size: 14px;
		color: #999;
	}

	.top-icon {
		width: 16px;
		height: 16px;
	}

	.top-right {
		cursor: pointer;
		display: flex;
		align-items: center;
		margin-right: 16px;
		margin-left: 16px;
	}

	.top-right-left {
		margin-left: auto;
	}

	.uni-container {
		margin-left: 20px;
		margin-right: 16px;
		width: auto;
		display: flex;
	}

	.search-back {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.search-noresult {
		font-size: 14px;
		color: #333;
		font-weight: 400;
	}

	.search-image {
		width: 150px;
		height: 150px;
	}

	.item-blue-text {
		cursor: pointer;
		font-size: 14px;
		font-weight: 400;
		color: #2DA9C5;
	}

	.top-exit {
		width: 76px;
		height: 30px;
		background: #E8F7FB;
		border-radius: 2px;
		font-size: 14px;
		font-weight: normal;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.right-back {
		width: 80%;
	}

	.left-back {
		width: 18%;
		min-width: 140px;
		background-color: white;
		height: 100%;
		border-right: 1px #eee solid;
	}

	.left-item {
		display: flex;
		font-size: 14px;
		color: #555;
		align-items: center;
		padding: 10px;
		font-weight: 500;
		background-color: white;
	}



	.left-item-select {
		background-color: #E8F7FB;
	}

	.left-item-image {
		cursor: pointer;
		width: 16px;
		min-width: 16px;
		height: 16px;
	}

	.left-item-image-trans {
		-webkit-transform: rotateZ(-90deg);
	}

	.left-item-image1 {
		margin-left: 10px;
	}

	.left-item-name {
		cursor: pointer;
		margin-left: 5px;
		font-weight: 400;
		max-width: 155px;
		width: 155px;
	}

	.left-item-btn {
		cursor: pointer;
		margin-right: 0px;
		margin-left: auto;
		width: 16px;
		min-width: 16px;
		height: 16px;
	}

	.pop-item {
		margin: 10px;
		color: #2DA9C5;
	}

	.left-item-add {
		margin-right: 0px;
		margin-left: auto;
		width: 20px;
		height: 20px;
	}
</style>
